import React, { useState } from 'react'
import { Button, Modal, Form, Input, Space, DatePicker, message } from "antd"
import  leaveModel from "../model/leaveModel";


export default function AddLeave(props:any) {
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const onFinish = async (info: any) => {
       let  start =info.start.format('YYYY-MM-DD HH:mm:ss');
       let  end = info.end.format('YYYY-MM-DD HH:mm:ss');
       let reason  = info.reason;

       if(new Date(start)<=new Date(end)){
           //把数据写入到数据库
        let  {data}  = await  leaveModel.add({start,end,reason});

        if(data.code){

            message.info(data.msg);
            setIsModalVisible(false);

            props.addDateItem(data.data);

        }else{
            message.info(data.msg);
            props.history.push("/")

        }


       }else{
           message.info("开始时间不能大于结束时间");
       }
        // setIsModalVisible(false);
    }
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    const onFinishFailed = () => {

    }
  return (
    <div>
         <div> <Button type="primary" onClick={showModal}>新增请假</Button></div>

<Modal title="请假信息" visible={isModalVisible} footer={null} onCancel={handleCancel}>


    <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
    >
        <Form.Item
            label="请假理由"
            name="reason"
            rules={[
                { required: true, message: '请假理由不能为空' },

            ]}
        >
            <Input />
        </Form.Item>
        <Form.Item
            label="开始时间"
            name="start"
            rules={[
                { required: true, message: '开始时间不能为空' },

            ]}
        >
            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />

        </Form.Item>
        <Form.Item
            label="结束时间"
            name="end"
            rules={[
                { required: true, message: '结束时间不能为空' },

            ]}
        >
            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
        </Form.Item>

        <Form.Item
            label="附件"
           
        >

        </Form.Item>


        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Space>
                <Button type="primary" htmlType="submit">
                    确定
                </Button>
                <Button type="primary" htmlType="reset" onClick={() => {
                    setIsModalVisible(false);
                }}>
                    取消
                </Button>
            </Space>
        </Form.Item>
    </Form>

</Modal>

    </div>
  )
}
